<template>
  <a-table
      :columns="runTableColumns"
      :dataSource="children.children"
      class="tableSecond"
      :rowClassName="rowClassName"
      :rowKey="(record) => record.id"
  >
    <template slot="titleSlot" slot-scope="value">
      <div style="justify-content: space-between; display: flex">
        <span>{{ value }}</span>
      </div>
    </template>
    <template slot="countSlot" slot-scope="value">
      <div style="justify-content: space-between; display: flex">
        <span style="display: inline-block; min-width: 100px">
          累计办件量: {{ value }}
        </span>
      </div>
    </template>
    <template slot="action" slot-scope="value, record">
      <div style="text-align: center">
        <a-button @click="() => doItNoe(value, record)">
          在线办理
        </a-button>
        <a-button style="margin-left: 8px" @click="() => guide(record)">
          办事指南
        </a-button>
      </div>
    </template>
  </a-table>
</template>

<script>
import {getLocalStorage} from "@/utils/localstore";
import {message} from 'ant-design-vue';
import {getKeyByMenuId} from "@/api/approve/approve";

export default {
  name: "RunTable",
  props: {
    children: {
      type: Object,
      default: () => ({}),
    }
  },
  data() {
    return {
      runTableColumns: [
        {
          title: '名称',
          dataIndex: 'title',
          scopedSlots: {
            customRender: 'titleSlot'
          }
        },
        {
          title: '办件量',
          dataIndex: 'count',
          scopedSlots: {
            customRender: 'countSlot'
          }
        },
        {
          title: '操作',
          dataIndex: 'id',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ]
    }
  },
  created() {
    this.children.children && this.children.children.forEach(item => item.key = item.id);
  },
  methods: {
    rowClassName(record, index) {
      return index % 2 ? 'bgc-white' : 'bgc-blue';
    },
    guide(record) {
      window.open(`#/financial/guide?fdTemplateId=${record.id}&title=${record.title}&tabsPath=${this.$route.path}`);
    },
    async doItNoe(value, record) {
      let urlString = '?'
      urlString += `title=${record.title}&budgetFlag=${record.budgetFlag}&`;
      if (JSON.parse(getLocalStorage('guidList')).length === 0) {
        message.warning('该用户没有绑定金财账号请绑定金财账号');
        return;
      }
      await getKeyByMenuId({
        menuId: value
      }).then(async res => {
        const {success, data} = res;
        if (success) {
          for (const key in data) {
            if (Object.prototype.hasOwnProperty.call(data, key)) {
              if (key === 'id') {
                urlString += `&defId=${data[key]}&instId=`;
              } else {
                urlString += `&${key}=${data[key]}`;
              }
            }
          }
          await window.open(`#${record.path}${urlString}&Novice=Novice&tabsPath=${this.$route.path}&cellId=${value}`);
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.tableSecond {
  background-color: #fff;
  padding: 15px;
  min-width: 620px;
  min-height: 620px;
}
</style>
